<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>学生成绩管理系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="学生成绩管理系统登录页面" />
<meta name="keywords" content="学生成绩,管理系统,登录" />

<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">

<style>
    body {
        background: #f5f5f5 !important;
        font-family: 'Open Sans', Arial, sans-serif;
        color: #333;
    }
    #status-bar {
        display: none;
        background: #3498db;
        color: white;
        padding: 10px 20px;
        font-size: 14px;
    }
    .fh5co-form {
        background: #fff;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-top: 20px;
    }
    .container {
        padding-top: 50px;
    }
    .system-title {
        font-size: 24px;
        font-weight: bold;
        color: #3498db;
        margin-bottom: 30px;
    }
    .login-title {
        font-size: 20px;
        margin-bottom: 20px;
        color: #555;
        text-align: center;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .user-type-group {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
    }
    .user-type-label {
        flex: 1;
        text-align: center;
        padding: 8px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 0 5px;
        cursor: pointer;
        transition: all 0.3s;
    }
    .user-type-label:hover {
        background: #f0f0f0;
    }
    .user-type-label input[type="radio"] {
        margin-right: 5px;
    }
    .btn-login {
        width: 100%;
        padding: 10px;
        background: #3498db;
        border: none;
        font-size: 16px;
        transition: all 0.3s;
        margin-bottom: 10px;
        color: white;
    }
    .btn-login:hover {
        background: #2980b9;
    }
    .btn-register {
        width: 100%;
        padding: 10px;
        background: #2ecc71;
        border: none;
        font-size: 16px;
        transition: all 0.3s;
        color: white;
    }
    .btn-register:hover {
        background: #27ae60;
        color: white;
    }
    .input-field {
        border-radius: 4px;
        padding: 12px;
        border: 1px solid #ddd;
    }
    .footer-links {
        text-align: center;
        margin-top: 15px;
    }
    .footer-links a {
        color: #3498db;
        text-decoration: none;
    }
    .footer-links a:hover {
        text-decoration: underline;
    }
    .captcha-container {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .captcha-display {
        flex: 1;
        height: 44px;
        border: 1px solid #ddd;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-weight: bold;
        color: #333;
        background: #f9f9f9;
        cursor: pointer;
        user-select: none;
    }
    .captcha-input {
        flex: 1;
    }
    .refresh-captcha {
        color: #3498db;
        cursor: pointer;
        font-size: 14px;
        text-align: right;
        margin-top: 5px;
    }
    .refresh-captcha:hover {
        text-decoration: underline;
    }
</style>

<script src="js/modernizr-2.6.2.min.js"></script>
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body class="style-2">

<!-- 登录状态栏 -->
<div id="status-bar">
    当前用户：<span id="userRole"></span> | 用户名：<span id="userName"></span> | 最后登录时间：<span id="lastLogin"></span>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="system-title">学生成绩管理系统</div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <form action="地址" class="fh5co-form animate-box" data-animate-effect="fadeIn">
                <div class="login-title">用户登录</div>
                <div class="form-group">
                    <label for="username" class="sr-only">用户名</label>
                    <input type="text" class="form-control input-field" id="username" placeholder="请输入用户名" autocomplete="off">
                </div>
                <div class="form-group">
                    <label for="password" class="sr-only">密码</label>
                    <input type="password" class="form-control input-field" id="password" placeholder="请输入密码" autocomplete="off">
                </div>
                <div class="form-group">
                    <div class="captcha-container">
                        <input type="text" class="form-control input-field captcha-input" id="captcha" placeholder="请输入验证码" autocomplete="off">
                        <div class="captcha-display" id="captchaDisplay">--</div>
                    </div>
                    <div class="refresh-captcha" id="refreshCaptcha">
                        看不清？点击刷新
                    </div>
                </div>
                <div class="form-group user-type-group">
                    <label class="user-type-label">
                        <input type="radio" name="a" value="student" checked> 学生
                    </label>
                    <label class="user-type-label">
                        <input type="radio" name="a" value="teacher"> 教师
                    </label>
                    <label class="user-type-label">
                        <input type="radio" name="a" value="admin"> 管理员
                    </label>
                </div>
                <div class="form-group">
                    <input type="button" value="登 录" class="btn btn-primary btn-login" id="login">
                    <a href="register.html" class="btn btn-register">注 册</a>
                </div>
                <div class="footer-links">
                    <a href="forgot-password.html">忘记密码?</a>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.placeholder.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/main.js"></script>

<script type="text/javascript">
    let currentCaptcha = '';

    function generateCaptcha() {
        currentCaptcha = '';
        for (let i = 0; i < 4; i++) {
            currentCaptcha += Math.floor(Math.random() * 10);
        }
        document.getElementById('captchaDisplay').textContent = currentCaptcha;
    }

    function refreshCaptcha() {
        generateCaptcha();
        document.getElementById('captcha').value = '';
    }

    generateCaptcha();
    document.getElementById('refreshCaptcha').onclick = refreshCaptcha;
    document.getElementById('captchaDisplay').onclick = refreshCaptcha;

    document.getElementById("login").onclick = function () {
        var name = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var captcha = document.getElementById("captcha").value;

        if(name === "") {
            alert("请输入用户名!");
            return;
        }
        if(password === "") {
            alert("请输入密码!");
            return;
        }
        if(captcha === "") {
            alert("请输入验证码!");
            return;
        }
        if(captcha !== currentCaptcha) {
            alert("验证码错误!");
            refreshCaptcha();
            return;
        }

        var radios = document.getElementsByName("a");
        var selectedType = "";
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                selectedType = radios[i].value;
                break;
            }
        }

        if(!selectedType) {
            alert("请选择登录类型");
            return;
        }

        var url = "";
        switch(selectedType) {
            case "student":
                url = "/student/login?student_id=" + name + "&password=" + password;
                break;
            case "teacher":
                url = "/teacher/login?teacher_id=" + name + "&password=" + password;
                break;
            case "admin":
                url = "/admin/login?admin_id=" + name + "&password=" + password;
                break;
        }

        var ajaxObj = new XMLHttpRequest();
        ajaxObj.open('get', url);
        ajaxObj.send();

        ajaxObj.onreadystatechange = function () {
            if (ajaxObj.readyState === 4 && ajaxObj.status === 200) {
                var currentTime = new Date().toLocaleString();

                localStorage.setItem("name", name);
                localStorage.setItem("role", selectedType);
                localStorage.setItem("lastLogin", currentTime);

                switch(selectedType) {
                    case "student":
                        window.location.href = "Student_Info.html";
                        break;
                    case "teacher":
                        window.location.href = "Teacher_Info.html";
                        break;
                    case "admin":
                        localStorage.setItem("current_type", "student_info");
                        window.location.href = "Admin_Info.html";
                        break;
                }
            } else if (ajaxObj.readyState === 4 && ajaxObj.status === 404) {
                var last = ajaxObj.responseText;
                var obj = JSON.parse(last);
                alert(obj.error);
            }
        };
    };

    // 页面加载时显示状态栏
    window.onload = function () {
        const name = localStorage.getItem("name");
        const role = localStorage.getItem("role");
        const lastLogin = localStorage.getItem("lastLogin");

        if (name && role && lastLogin) {
            document.getElementById("status-bar").style.display = "block";

            let roleLabel = '';
            switch(role) {
                case "student": roleLabel = "学生"; break;
                case "teacher": roleLabel = "教师"; break;
                case "admin": roleLabel = "管理员"; break;
            }

            document.getElementById("userRole").textContent = roleLabel;
            document.getElementById("userName").textContent = name;
            document.getElementById("lastLogin").textContent = lastLogin;
        }
    };
</script>

</body>
</html>
